<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="exp_10_1.css">
  <title>儒家“五常”</title>
</head>

<body>
  <div id="header">
    <img src="10.jpg" alt="logo">
    <h4><span>儒家“五常”</span></h4>
  </div>
  <div id="content">
    <div id="left">
      <ul>
        <li><a href="3.jpg" data-info="仁：是儒家思想的核心概念，代表着仁爱、仁慈。">首页</a></li>
        <li><a href="4.jpg" data-info="仁：仁爱、爱人，是一种发自内心的善良和慈悲。">仁</a></li>
        <li><a href="5.jpg" data-info="义：正义、道义，指的是合乎道德的行为准则。">义</a></li>
        <li><a href="21.jpg" data-info="礼：礼仪、礼节，是规范人们行为的外在形式。">礼</a></li>
        <li><a href="22.jpg" data-info="智：智慧、智谋，强调通过学习和思考获得知识。">智</a></li>
        <li><a href="23.jpg" data-info="信：诚信、守信，是人际交往中最基本的道德准则。">信</a></li>
      </ul>
    </div>
    <div id="right">
      <iframe src="7.jpg" width="690px" height="380px" id="imgFrame"></iframe>
    </div>
  </div>
  <div id="footer">
    <p id="desc">仁义礼智信为儒家‘五常’，孔子提出‘仁、义、礼’，孟子延伸为‘仁、义、礼、智’，董仲舒扩充为‘仁、义、礼、智、信’，后称‘五常’。这‘五常’贯穿于中华伦理的发展中，成为中国价值体系中的最核心的因素。</p>
  </div>
</body>

<script>
  const links = document.querySelectorAll('#left a');
  const desc = document.getElementById('desc');
  links.forEach(link => {
    link.addEventListener('mouseover', function () {
      const info = this.dataset.info;
      desc.textContent = info;
    });
    link.addEventListener('mouseout', function () {
      desc.textContent = "仁义礼智信为儒家‘五常’，孔子提出‘仁、义、礼’，孟子延伸为‘仁、义、礼、智’，董仲舒扩充为‘仁、义、礼、智、信’，后称‘五常’。这‘五常’贯穿于中华伦理的发展中，成为中国价值体系中的最核心的因素。";
    });
  });
</script>

</html>